<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="h" uri="/syzg-html"%>
<%
	request.setAttribute("ctx", request.getContextPath());
%>
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="${ctx}/base/imgsel/css/style.css"/>
	<%--新增样式处理 start--%>
	<link rel="stylesheet" href="${ctx}/zenithsun/css/admin-imgList.css"/>
	
	<script type="text/javascript">
		var viewNewsdetailUrl = "${ctx}/path/newsinfo/viewNewsdetail";
		var delNewsdetailUrl = "${ctx}/path/newsinfo/delNewsdetail?newsinfoId="+newsinfoId;
		function showNewsdetailModal(id,path){
			var param = "?id=" + id + "&path=" + path;
			$("#myDlg4Detail").load(viewNewsdetailUrl + param,function(){
				$('#viewNewsdetailModal').modal("show");
			});
		}
		
		function delNewsdetail(){
			$.post(delNewsdetailUrl,$("#listImageForm").serialize(),function(data){
				$("#pics").load(listPicsUrl + "?newsinfoId=" + ${"newsinfoId"} + "&picTempPath=" + picTempPath);
			});
		}
		
		function delNewsDetail(idPath){
			$.get(delNewsdetailUrl + "&selectedDetails=" + idPath,function(){
				$("#pics").load(listPicsUrl + "?newsinfoId=" + ${"newsinfoId"} + "&picTempPath=" + picTempPath);
			});
		}
		//全选功能
		function selectAllListImage(t){
			//改变按钮的内容
			var flag=false;
			t=$(t);
			if(t.html()=="全部选择"){
				t.html("取消全选");
				flag=true;
			}else{
				t.html("全部选择");
				flag=false;
			}
			var selectedRow = $("li[name='liSelectItem']");
			for (i=0;i<selectedRow.length;i++){
				var selectItem=selectedRow[i];
				if(selectItem!=undefined){
					selectItem=$(selectItem);
					lmselect(selectItem,flag);
				}
			}
		}
		function noImage(t){
			t.src="${ctx}/zenithsun/news/mobile/images/Default-bg270x180.png"; 
			t.onerror=null;
		}
	</script>
</head>
<body>
    <div class="form-group">
      <div class="col-sm-12" style="text-align:right;">
        <button type="button" class="btn btn-primary btn-sm" onclick="showPicUploadModal()">上传图片</button>
        <button type="button" class="btn btn-primary btn-sm" onclick="selectAllListImage(this)">全部选择</button>
        <button type="button" class="btn btn-primary btn-sm" onclick="delNewsdetail()">批量删除</button>
        <button type="button" class="btn btn-primary btn-sm" onclick="saveSorts()">保存排序</button>
      </div>
    </div>
    
    <form id="listImageForm" name="listImageForm" method="post">
    <div class="form-group">
      <div class="col-sm-12">
	    <div class="picList" style="height:350px;overflow: auto;">
		  <ul id="listImageUL">
	  		<c:forEach items="${lstNewsdetailinfo }" var="newsdetailinfo">
		  		<li name="liSelectItem" onmousemove="lmmve(this)" onmouseout="lmmot(this)" onclick="lmmck(this)">
		  		  <dl>
		  		    <dd class="mod-itemsContent">
		  		      <div id="div_${newsdetailinfo.id }">
		  		      	<img src="${newsdetailinfo.path}" onerror="noImage(this)"/>
		  		      	<em class="picture-num j-numSize"></em>
		  		      </div>
					  <div class="picList-editGrid-wrap j-popShow" style="height: 150px;"></div>
		  		      <div class="picList-editGrid j-popShow">
		  		      	<input type="hidden" name="ids" value="${newsdetailinfo.id }"/>
		  		      	<input type="hidden" id="path_${newsdetailinfo.id}" value="${newsdetailinfo.path }"/>
		  		      	<input type="hidden" id="${newsdetailinfo.id}" class="j-selectId" value="false"/>
		  		        <a class="i-edit-btn" href="javascript:showNewsdetailModal('${newsdetailinfo.id }','${newsdetailinfo.path }')" title="修改图片信息"><i class="fa fa-edit"></i> </a>
		  		        <a class="i-remove-btn" href="javascript:delNewsDetail('${newsdetailinfo.id }|${newsdetailinfo.path }')" title="删除图片信息"><i class="fa fa-trash"></i> </a>
		  		      </div>
		  		    </dd>
		  		  </dl>
			    </li>
		  	</c:forEach>
		  </ul>
		  <input name="list1SortOrder" id="sortNumbers" type="hidden" />
		</div>
	</div>
    </div>
    </form>
    <div id="myDlg4Detail"></div>
  <script src="${ctx}/base/imgsel/js/img.js" type="text/javascript"></script>
  <script>
	  function saveSorts(){
		  var ids = "";
		  $("input[name='ids']").each(function(){
			  ids += $(this).val()+",";
		  });
		  $.post(realPath+"/path/newsinfo/saveSorts", {"ids":ids,"newsinfoId":newsinfoId},
					function(result) {
						if (result.state == 'Success') {
							alert("记录已保存");
						} else {
							alert("操作失败,原因："+result.content);
						}
					}
				);
	  }
		//此为图片列表鼠标经过时编辑事件
		function lmmve(obj){
			$(obj).find(".j-popShow").show();
		}
		//此为图片列表鼠标经过时删除事件
		function lmmot(obj){
			$(obj).find(".j-popShow").hide();
		}
		//此为图片列表鼠标经过时点击选中事件
		function lmmck1(obj){
			$(obj).find("div").toggleClass('selected');
			var objBtn = $(obj).find("input:checkbox");
			if(objBtn.prop('checked')){
				objBtn.prop('checked', false);
			} else {
				objBtn.prop('checked', true);
			}
		}
		//此为图片列表鼠标经过时点击选中事件
		function lmmck(obj){
			$(this).toggleClass('selected');
			$(obj).find("div").toggleClass('selected');
			var objBtn = $(obj).find(".j-selectId");
			var objBtnVal = objBtn.val();
			var selId = objBtn.prop("id");
			var selPath = $("#path_" + selId).val();
			if(objBtnVal=="true"){
				objBtn.val(false);
				$("#sel_" + selId).remove();
				$(obj).parents("li").removeClass('selected');
	    		$(obj).parents(".select").removeClass('selected');
			} else if(objBtnVal=="false") {
				objBtn.val(true);
				var hNode = "<input type=\"hidden\" id=\"sel_" + selId + "\" name=\"selectedDetails\" value=\"" + selId + "|" + selPath + "\"/>";
				$("#" + selId).parent().append(hNode);
				if ($(obj).parents("li.selected").length == 0) {
				    $(obj).parents("li").addClass('selected');
				    $(obj).parents(".select").addClass('selected');
				}
			}
			//counter();
			//alert(checkItem.id+":"+checkItem.checked);
		}
		
		//此为图片列表鼠标经过时点击选中事件
		function lmselect(obj,flag){
			var objBtn = $(obj).find(".j-selectId");
			var objBtnVal = objBtn.val();
			var selId = objBtn.prop("id");
			var selPath = $("#path_" + selId).val();
			if(!flag){//取消全选
				$("#sel_" + selId).remove();
		    	$(this).removeClass('selected');
				$(obj).find("div").removeClass('selected');
			} else{//全部全选
				$(this).addClass('selected');
				$(obj).find("div").addClass('selected');
				var hNode = "<input type=\"hidden\" id=\"sel_" + selId + "\" name=\"selectedDetails\" value=\"" + selId + "|" + selPath + "\"/>";
				$("#" + selId).parent().append(hNode);
			}
			objBtn.val(flag);
			//counter();
			//alert(checkItem.id+":"+checkItem.checked);
		}
	</script>
	<script src="${ctx}/zenithsun/js/jquery.dragsort-0.5.1.js" type="text/javascript"></script>
	<script src="${ctx}/zenithsun/js/run.js" type="text/javascript"></script>
	
</body>
</html>